<template>
    <div class="w-full text-center">
        <div class="w-full! relative" :class="{
            'h-[var(--swheight)]': setHeight
        }">
            <div class="absolute top-0 left-0 w-full h-full translate-x-[-30%] hidden lg:block" v-if="leftTabs">
                <el-tabs tab-position="left" class="h-[130%]" v-model="action">
                    <el-tab-pane :label="index + ''" :name="index" v-for="(item, index) in list">
                        <template #label>
                            <img :src="getImg(item)" class="w-[1rem] h-[1rem] my-1" :class="{
                                'border! border-[1px]! border-[rgb(57,196,100)]! border-solid!': action === index
                            }" :style="{
                                width: (swiperItemWidth / 4) + 'px',
                                height: (swiperItemWidth / 4) + 'px',
                            }" />
                        </template>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div class="w-full!" ref="swiperBox">
                <v-carousel hide-delimiter-background hide-delimiters :show-arrows="showArrow"
                    @update:model-value="change" v-model="action" class="w-full!" :style="{
                        height: 'auto'
                    }">
                    <v-carousel-item class="w-full!" v-for="(item, index) in list" :intro="item" :key="index">
                        <div v-if="Object.keys($slots).length > 0" class="w-full!">
                            <slot :data="item" :index="index"></slot>
                        </div>
                        <div v-else>
                            <div class="w-full md:w-[100%] flex mx-auto relative overflow-hidden cursor-pointer"
                                @mouseenter="showZoom = true" @mouseleave="showZoom = false"
                                @mousemove="updateZoomPosition" ref="swiperItem">
                                <!-- 展示图片 -->
                                <img :src="getImg(item)" alt="" class="w-[100%]! h-[100%]!" v-img-auto />
                                <!-- 放大图片 -->
                                <img v-show="showZoom" :src="getImg(item)" alt=""
                                    class="absolute z-10 pointer-events-none" :style="{
                                        left: `${25}%`, // 调整水平位置
                                        top: `${25}%`, // 调整垂直位置
                                        width: '160%',
                                        height: '160%',
                                        transform: `translate(-50%, -50%)`,
                                        // opacity: '0.3',
                                        // border: '1px solid rgba(0, 0, 0, 1)',
                                        clipPath: 'inset(0 0 0 0)', // 确保图片完整显示
                                        ...zoomStyle
                                    }" v-img-auto />
                            </div>
                        </div>
                    </v-carousel-item>
                </v-carousel>
            </div>
        </div>


        <div class="flex justify-center items-center space-x-2 pt-4" v-if="defaultActionTop && list.length > 1">
            <div class="rotate-180 mr-3 font-bold " @click="change(action - 1)">
                <i class="iconfont icon-arrow text-[21px]"></i>
            </div>
            <div :key="index" v-for="(item, index) in list" @click="change(index)">
                <div class="h-2 w-2 rounded-full bg-gray-200" :class="{
                    'bg-black': index === action
                }"></div>
            </div>
            <div class="ml-5! font-bold" @click="change(action + 1)">
                <i class="iconfont icon-arrow text-[21px]"></i>
            </div>
        </div>
        <div class="tabsbox hidden! md:flex! justify-center items-center" v-if="defaultAction">
            <v-tabs center-active :showArrows="false">
                <v-tab :key="index" v-for="(item, index) in list" @click="change(index)">
                    <img src="https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp"
                        class="w-[9.4rem] h-[9.4rem]" />
                </v-tab>
            </v-tabs>
        </div>
        <v-btn elevation="0" color="#39c464" class="w-full! mt-6 text-white max-w-[400px]! mx-auto!"
            v-if="showBtn ?? true">
            View All Custom Products
        </v-btn>
    </div>

</template>

<script setup lang="ts">
// 引入 img-vuer，安装插件
import type { PropType } from 'vue';
import { useWindowResize } from '@/composables/useWindowResize';
const { resize } = useWindowResize();
const action = ref(0)
const height = ref('auto')
const isShow = ref(false)
const showZoom = ref(false)
const zoomStyle = ref({})
const updateZoomPosition = (event: MouseEvent) => {
    const container = event.currentTarget as HTMLElement;
    if (!container) return;

    const rect = container.getBoundingClientRect();
    // 计算鼠标在容器中的相对位置（0-1范围）
    const x = (event.clientX - rect.left) / rect.width;
    const y = (event.clientY - rect.top) / rect.height;
    // 计算偏移量，使鼠标位置对应放大区域
    const offsetX = 100 - (100 - (75 - 50 * x));
    const offsetY = 100 - (100 - (75 - 50 * y));
    zoomStyle.value = {
        left: `${offsetX}%`, // 调整水平位置
        top: `${offsetY}%`, // 调整垂直位置
    };
}
const props = defineProps({
    showArrow: {
        type: Boolean,
        default: false
    },
    leftTabs: {
        type: Boolean,
        default: false
    },
    list: {
        type: Array as PropType<string[] | (string[])[]>,
        default: () => []
    },
    // height: {
    //     type: [String, Number],
    //     default: 300
    // },
    setHeight: {
        type: Boolean,
        default: true
    },
    type: {
        type: String as PropType<'1' | '2'>,
        default: '1'
    },
    showBtn: {
        type: Boolean,
        default: true
    },
    defaultAction: {
        type: Boolean,
        default: false
    },
    defaultActionTop: {
        type: Boolean,
        default: false
    }
})
const change = (e: any) => {
    if (e < 0 || e > (props.list ?? []).length - 1) return
    action.value = e
}

const swiperBox = useTemplateRef('swiperBox')
const swiperItem = useTemplateRef('swiperItem')

const getImg = (item: string | string[]) => {
    if (typeof item === 'string') return item
    return item?.[0] || ''
}
const swiperItemWidth = ref(0)
watchEffect(() => {
    height.value = swiperBox.value?.clientHeight + 'px'
    swiperItemWidth.value = swiperItem.value?.[0]?.clientWidth
})

nextTick(() => {
    isShow.value = true
})
</script>

<style scoped lang="scss">
.tabsbox :deep(.v-tabs--density-default) {
    height: auto !important;
}

.tabsbox :deep(.v-btn) {
    min-width: 0 !important;
    height: auto !important;
    padding: 0 2px;
}

// :deep(.v-slide-group__prev) {
//     display: none !important;
// }

// :deep(.v-slide-group__next) {
//     display: none !important;
// }

:deep(.v-btn--density-default) {
    height: calc(var(--v-btn-height) + 12px) !important;
}

:deep(.el-tabs__item) {
    height: auto !important;
}

.tabs__nav {
    background: white;
    color: black !important;
    font-weight: 800 !important;
    border-radius: 50%;
    height: 30px !important;
    width: 30px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    // transform: translateX(70%);
    left: auto !important;
    transform: translateX(-20%) !important;
    box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12))
}

:deep(.el-tabs__nav-prev) {
    @extend .tabs__nav; // 继承 .tabs__nav 的所有样式
}

:deep(.el-tabs__nav-next) {
    @extend .tabs__nav; // 继承 .tabs__nav 的所有样式

    bottom: 2px !important;
}

:deep(.el-tabs__active-bar) {
    display: none !important;
}

:deep(.el-tabs__nav-wrap) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    &::after {
        display: none !important;
    }
}

:deep(.el-tabs__nav-scroll) {
    height: 90% !important;
}

:deep(.v-window__controls) {
    .v-btn:first-child {
        position: relative;
        left: -10px !important;
    }

    .v-btn:last-child {
        position: relative;
        right: -10px !important;
    }
}
</style>